<template>
  <div class="about">
    <my-header>
      <template #left>
        <span @click="$router.back()">返回</span>
      </template>
      <template #center>
        {{ city.name }}
      </template>
      <template #right> 切换城市 </template>
    </my-header>
    <my-input @submit="search" v-model="inputVal"></my-input>
    <div class="history" v-if="list.length == 0">
      <p>搜索历史记录</p>
      <ul>
        <li v-for="(item, index) in historyList" :key="index" @click="jump(item)">
          <h4>{{ item.name }}</h4>
          <p>{{ item.address }}</p>
        </li>
      </ul>
      <p @click="$store.commit('delect')" style="background:#fff;text-align:center;">清空历史记录</p>
    </div>
    <ul v-else>
      <li v-for="(item, index) in list" :key="index" @click="jump(item)">
        <h4>{{ item.name }}</h4>
        <p>{{ item.address }}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import myHeader from "../components/myHeader.vue";
import MyInput from "../components/myInput.vue";
import api from "../api/index";
import { computed, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  components: { myHeader, MyInput },
  setup() {
    const { commit,state } = useStore();
    const { push } = useRouter();
    const data = reactive({
      city: {},
      inputVal: "", // 输入的值
      list: [], // 列表的数据
      historyList: computed(() => state.history)
    });
    api.get("/v1/cities/32").then((res) => {
      data.city = res;
    });
    const search = () => {
      api
        .get(`v1/pois?type=search&city_id=32&keyword=${data.inputVal}`)
        .then((res) => {
          data.list = res.message?[]:res;
        });
    };
    const jump = (val) => {
      commit("addHistory", val);
      push(`/home/index?geohash=${val.geohash}`);
    };
    return {
      search,
      ...toRefs(data),
      jump,
    };
  },
};
</script>
<style lang="scss" scoped>
.about {
  height: 100%;
  background: #e9e9e9;
  ul {
    height: calc(100% - 165px);
    overflow: auto;
  }
  li {
    padding: 10px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid #e9e9e9;
    background: #fff;
    p {
      font-size: 12px;
      color: #ccc;
    }
  }
}
</style>
